let dataArr = [];
let url = "http://localhost:1337";
let oUl = document.getElementById("oUl");
let allprice = document.getElementById("allprice");

console.log(allprice);
//渲染
function renderList() {
    console.log(localStorage.getItem("token"));
    axios(url + "/api/v1/shop_carts", {
        method: "get",
        headers: {
            token: localStorage.getItem("token"),
        },
    }).then((r) => {
        dataArr = r.data.data;
        let str = "";
        console.log(dataArr);
        dataArr.forEach((v, i) => {
            str += `
        <li class='list_items'>
        <p>
                            <input type="checkbox" class='ck'>
                        </p>


                        <p>

                            <img src="${url + v.product.coverImage}" alt="">

                        </p>

                        <p>

                           ${v.product.name}

                        </p>

                        <p>
                            购买规格：2件
                        </p>

                        <p>
                            ${v.price}
                        </p>

                        <p>
                            <input type="button" value="-"  onclick='jian(${
                              v.product.id
                            },this)'>
                            <input type="text" value="${
                              v.amount
                            }" class='tex' data='${v.product.id}'>
                            <input type="button" value="+" onclick='jia(${
                              v.product.id
                            },this)'>
                        </p>

                        <p class='price'>
                            ${parseInt(v.amount * v.price)}
                        </p>

                        <p>
                            <span>移入收藏夹</span>
                            <span class='sc' onclick='deleteList(${
                              v.id
                            },this)'>删除</span>
                        </p>

                    </li>
        `;
        });
        oUl.innerHTML = str;
        // 全选全不选
        let checkAll = document.querySelector("#checkAll");
        let cks = document.querySelectorAll(".ck");
        let allck = document.getElementById("allck");

        function checkboxAll(all, alt) {
            all.onclick = () => {
                alt.checked = all.checked;
                for (let i = 0; i < cks.length; i++) {
                    cks[i].checked = all.checked;
                }
                getTotalPrice();
                numList();
                backColor()
            };
            for (let i = 0; i < cks.length; i++) {
                cks[i].onclick = function() {
                    let flag = true;
                    for (let i = 0; i < cks.length; i++) {
                        if (!cks[i].checked) {
                            flag = false;

                            getTotalPrice();
                            numList();
                            backColor()
                            break;
                        }
                        getTotalPrice();
                        numList();
                        backColor()
                    }
                    allck.checked = flag;
                    checkAll.checked = flag;
                };
                console.log(allck.checked, "6666");
            }
        }
        checkboxAll(checkAll, allck);
        checkboxAll(allck, checkAll);
    });
}

//数量减
function jian(id, i) {
    let findArr = dataArr.find((v) => v.product.id == id);
    let singleprice = document.querySelector(".price");

    axios(url + "/api/v1/shop_carts", {
        method: "post",
        data: {
            product: id,
            amount: -1,
            price: findArr.price,
        },
        headers: {
            token: localStorage.getItem("token"),
        },
    }).then((r) => {
        axios(url + "/api/v1/shop_carts", {
            method: "get",
            headers: {
                token: localStorage.getItem("token"),
            },
        }).then((r) => {
            let findArr = r.data.data.find((v) => v.product.id == id);
            let ele = i.nextSibling;
            while (ele) {
                if (ele.tagName && ele.tagName.toLowerCase() == "input") {
                    break;
                } else {
                    ele = ele.nextSibling;
                }
            }
            ele.value = findArr.amount;
            let olo = i.nextSibling.parentNode.nextSibling;
            while (olo) {
                if (olo.tagName && olo.tagName.toLowerCase() == "p") {
                    break;
                } else {
                    olo = olo.nextSibling;
                }
            }
            olo.innerText = parseInt(findArr.amount * findArr.price);
            getTotalPrice();
            numList();
        });
    });
}
//数量加

function jia(id, i) {
    let findArr = dataArr.find((v) => v.product.id == id);
    axios(url + "/api/v1/shop_carts", {
        method: "post",
        data: {
            product: id,
            amount: 1,
            price: findArr.price,
        },
        headers: {
            token: localStorage.getItem("token"),
        },
    }).then((r) => {
        axios(url + "/api/v1/shop_carts", {
            method: "get",
            headers: {
                token: localStorage.getItem("token"),
            },
        }).then((r) => {
            let findArr = r.data.data.find((v) => v.product.id == id);
            let ele = i.previousSibling;
            while (ele) {
                if (ele.tagName && ele.tagName.toLowerCase() == "input") {
                    break;
                } else {
                    ele = ele.previousSibling;
                }
            }
            ele.value = findArr.amount;
            let olo = i.previousSibling.parentNode.nextSibling;
            while (olo) {
                if (olo.tagName && olo.tagName.toLowerCase() == "p") {
                    break;
                } else {
                    olo = olo.nextSibling;
                }
            }
            olo.innerText = parseInt(findArr.amount * findArr.price);
            getTotalPrice();
            numList();
        });
    });
}

//删除
function deleteList(id, i) {
    console.log(i);
    console.log(id);
    axios(url + "/api/v1/shop_carts/" + id, {
        method: "delete",
        headers: {
            token: localStorage.getItem("token"),
        },
    }).then((r) => {
        let oLi = i.parentNode.parentNode;
        oUl.removeChild(oLi);
        getTotalPrice();
        numList();
    });
}
//  总价
function getTotalPrice() {
    axios(url + "/api/v1/shop_carts", {
        method: "get",
        headers: {
            token: localStorage.getItem("token"),
        },
    }).then((r) => {
        let alldata = r.data.data;
        let cks = document.querySelectorAll(".ck");
        let allPriceel = document.getElementById("allPriceel");
        let totalPrice = 0;
        for (let j = 0; j < cks.length; j++) {
            if (cks[j].checked == true) {
                totalPrice += alldata[j].amount * alldata[j].price;
            }
        }
        allPriceel.innerText = parseInt(totalPrice) + "元";
        allprice.innerText = parseInt(totalPrice) + "元";
    });
}
// 跳转首页
let index = document.querySelectorAll(".index");
for (let i = 0; i < index.length; i++) {
    index[i].onclick = function() {
        location.href = "home.html";
    };
}
//修改名字
let name = document.getElementById("name");
let names = localStorage.getItem("username");
if (names != undefined) {
    name.innerText = names;
}

renderList();
//计算件数
function numList() {
    axios(url + "/api/v1/shop_carts", {
        method: "get",
        headers: {
            token: localStorage.getItem("token"),
        },
    }).then((r) => {
        let alldata = r.data.data;
        let cks = document.querySelectorAll(".ck");
        let num = document.getElementById("num");
        let totalPrice = 0;
        for (let j = 0; j < cks.length; j++) {
            if (cks[j].checked == true) {
                totalPrice += alldata[j].amount;
                backColorfe()
            }
        }
        num.innerText = totalPrice;
    });
}

function backColorfe() {
    let catchs = document.querySelector('.catch')
    catchs.style.backgroundColor = '#fe0137'
}

function backColor() {
    let catchs = document.querySelector('.catch')
    catchs.style.backgroundColor = '#888888'
}